{include file='/public/index-header'}
<body>
    {include file='/public/index-nav'}
    <div class="layui-container ws-container">
        <div class="layui-row" style="margin-top: 40px;height: 212px;">
            <div class="layui-col-md8 ws_banner_title" style="display: flex;">
                <p>
                    <b>{$nav['name']|default=''}</b>
                    <span>{$nav['intro']|default=''}</span>
                </p>
            </div>
            <div class="layui-col-md4" style="display: flex;">
                <img src="__ROOT__/static/plugs/index/img/sj_project.png" alt="" style="width: 100%;">
            </div>
            <input type="hidden" id="category_json" value="{$category|json_encode}">
            <input type="hidden" id="default_sct_json" value="{$default_sct|json_encode}">
        </div>

        <div class="layui-row" style="margin-top: 40px;">
            <div class="layui-col-md12" style="display: flex;">
                <div class="cat_title">分类</div>
                <div>
                    <div class="cat_tag cat_main">
                        <span class="cat_active" mmk="-1" mmid="-1">全部</span>
                        {if !empty($category)}
                            {foreach $category as $key => $value}
                                <span mmk="{$key|default=0}" mmid="{$value['id']|default=0}">{$value['name']|default=''}</span>
                            {/foreach}
                        {/if}
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row" style="margin-top: 40px;">
            <div class="layui-col-md12" style="display: flex;">
                <div class="cat_title">子类</div>
                <div>
                    <div class="cat_tag cat_sub">
                        <span class="cat_active" mmid="-1">全部</span>
                        {if !empty($default_sct)}
                            {foreach $default_sct as $key => $value}
                                <span mmid="{$value['id']|default=0}">{$value['name']|default=''}</span>
                            {/foreach}
                        {/if}
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row" style="margin-top: 40px;">
            <div class="layui-col-md12" style="display: flex;justify-content: center;">
                <div class="layui-col-md4">
                    <div class="layui-form layui-hide-xs ws-search" style="background: #f6f7f9;width: 100%;">
                        <div class="layui-form-select">
                            <div class="layui-select-title">
                                <input type="text" placeholder="搜索" value="" class="layui-input" id="keyword" style="cursor:initial;background-color: #eee;">
                            </div>
                        </div>
                        <i class="layui-icon layui-icon-search k_search" style="left: unset;right: 5px;cursor: pointer;"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row layui-col-space30" style="margin-top: 40px;" id="course_list">
        </div>

        <div class="layui-row">
            <div class="layui-col-md12 layui-col-sm12" style="display: flex;justify-content: center;">
                <div id="page_list"></div>
            </div>
        </div>
    </div>
    {include file='/public/index-foot'}
</body>
<style type="text/css">
    .cat_title {
        width: 41px;
        text-align-last: justify;
        margin-right: 14px;
    }

    .cat_tag>span {
        align-items: center;
        cursor: pointer;
        display: inline-flex;
        font-size: 14px;
        margin-bottom: 17px;
        margin-left: 8px;
        padding: 0px 12px
    }

    .cat_active {
        background: #f6f7f9;
        border-radius: 2px;
        color: #165dff!important;
    }
    .cat_tag span:hover{
        color: #165dff!important;
    }
    .cmdlist-container {
        background: #fff;border:1px solid transparent;
    }
    .cmdlist-text{
        padding:20px;
    }
    .price {
        margin: 10px 0px 0px 0px
    }
    .price span{
        margin: 0px 5px 0px 0px;
    }
    .price i {
        margin-right: 6px;
    }
</style>
<script type="text/javascript">
    $(function () {
        layui.use(['util'], function () {
            let util = layui.util;
            let laypage = layui.laypage;
            let category_data = JSON.parse($('#category_json').val());
            let default_sct_data = JSON.parse($('#default_sct_json').val());

            $('.cat_main').on('click', 'span', function (elem) {
                $(elem.target).addClass('cat_active').siblings().removeClass('cat_active');
                let m_index = $(elem.target).attr('mmk');
                let discip_data = {}
                if(m_index == -1){
                    discip_data = default_sct_data
                }else {
                    discip_data = category_data[m_index]['sub'] || default_sct_data
                }
                let ins_html = '<span class="cat_active" mmid="-1">全部</span>';
                if(discip_data){
                    layui.each(discip_data, function (index, item) {
                        ins_html += '<span mmid="'+item['id']+'">'+item['name']+'</span>';
                    })
                }
                $('.cat_sub').empty().append(ins_html)
                // 初始化列表数据
                load_list();
            });

            $('.cat_sub').on('click', 'span', function (elem) {
                $(elem.target).addClass('cat_active').siblings().removeClass('cat_active');
                // 初始化列表数据
                load_list();
            });

            $('.k_search').click(function () {
                // 初始化列表数据
                load_list();
            })
            $("#keyword").keydown(function(event) {
                if (event.which == 13) {
                    // 初始化列表数据
                    load_list();
                }
            });

            // 获取列表数据
            let pg_size = '{$page_size|default=16}';
            function load_list(page = 1) {
                let category_id =  $('.cat_main').find('.cat_active').attr('mmid');
                let sub_category_id = $('.cat_sub').find('.cat_active').attr('mmid');
                let key = $('#keyword').val();
                let data = {
                    key : key,
                    category_id : category_id,
                    sub_category_id : sub_category_id,
                    page : page,
                    limit : pg_size
                }
                httpRequest('{:sysuri("list")}', data, 'post', function (info, ret_data) {
                    // 加载数据
                    let c_list = ret_data.list;
                    let html = '';
                    layui.each(c_list, function (index, item) {
                        html += '<div class="layui-col-md3 layui-col-sm5">'+
                            '<div class="cmdlist-container" m_id="'+item.id+'" lay-on="detail" style="cursor: pointer;">'+
                                '  <img src="'+item.logo+'" style="width: 100%;height:210px">'+
                                '  <div class="cmdlist-text">'+
                                '    <p class="layui-elip">'+item.title+'</p>'+
                                '    <div class="layui-elip price">'+
                                '       <span>'+
                                '            <i class="layui-icon layui-icon-app"></i>'+item.platform+
                                '       </span>'+
                                '    </div>'+
                                '    <div class="price" style="display: flex;">'+
                                '        <span>'+
                                '          <i class="layui-icon layui-icon-spread-left"></i>'+item.chapter_total+
                                '        </span>'+
                                '        <span class="layui-elip">'+
                                '            <i class="layui-icon layui-icon-read"></i>'+item.auther+
                                '        </span>'+
                                '    </div>'+
                                '  </div>'+
                            '</div>'+
                        '</div>';
                    })
                    $('#course_list').empty().html(html);
                    // 普通用法
                    laypage.render({
                        elem: 'page_list',
                        count: ret_data.total, // 数据总数,
                        limit: data.limit,// 每页显示的条数。
                        curr: data.page, //初始化当前页码。
                        theme:'#1e9fff',
                        jump: function(obj, first){
                            // 首次不执行
                            if(!first){
                                load_list(obj.curr)
                            }
                        }
                    });
                });
            }

            // 跳转详情
            util.on({
                detail: function(){
                    let id = $(this).attr('m_id');
                    util.openWin({
                        url: '{:sysuri("detail")}?id='+id,
                    });
                },
            });


            // 初始化列表数据
            load_list();
    });
})
</script>